<script setup>
import { ref } from 'vue'
import SelectPlant from './components/SelectPlant.vue'
import SelectWorkShop from './components/SelectWorkShop.vue'
import { useUserStore } from '@/stores'
import { Delete } from '@element-plus/icons-vue'
// import { Edit } from '@element-plus/icons-vue'
// import { placeholderSign } from 'element-plus/es/components/table-v2/src/private'
import {
  machineGetListService,
  deleteDeviceCode,
  getDeviceCodeList
} from '../../api/clothrequest'
import { GetWorkShopService } from '../../api/clothrequest'
import { machineAddService } from '../../api/clothrequest'
import { useParms } from '@/stores'

const clothList = ref([])
const loading = ref(false)
const loadingdeviceCode = ref(false)
const dialogVisible = ref(false)
const params = ref({
  factoryId: '',
  id: ''
})
const deciveCodeList = ref([])
const workshopList = ref([])
const useparms = useParms()
useparms.emptyParams()
const userStore = useUserStore()
// 获取机械数据
const getChannelList = async () => {
  loading.value = true
  const res = await machineGetListService(params.value)
  console.log(params.value)
  clothList.value = res.data.data
  loading.value = false
}
const formModel = ref({
  id: '',
  deviceCode: ''
})
getChannelList()

// 搜索逻辑 => 按照最新的条件，重新检索，从第一页开始展示
const onSearch = () => {
  getChannelList()
}

// 重置逻辑 => 将筛选条件清空，重新检索，从第一页开始展示
const onReset = () => {
  params.value.factoryId = ''
  params.value.id = ''
  getChannelList()
}
const onSubmit = async () => {
  await ElMessageBox.confirm('此操作将增加机台号, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'info'
  })
  console.log(formModel.value)
  await machineAddService(formModel.value)
  onResetDeviceCode()
  ElMessage.success('添加成功')
}
const getWorkShop = async () => {
  const res = await GetWorkShopService(params.value)
  workshopList.value = res.data.data
}
const deletedeviceCode = async (row) => {
  // 提示用户是否要删除
  await ElMessageBox.confirm(
    '此操作将删除该机台号，正在工作的不能删除, 是否继续?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info'
    }
  )
  await deleteDeviceCode(row)
  ElMessage.success('删除成功')
  // 重新渲染列表
  getdeviceCodeList()
}
const onResetDeviceCode = () => {
  formModel.value.id = ''
  formModel.value.deviceCode = ''
  getdeviceCodeList()
}
const getdeviceCodeList = async () => {
  loadingdeviceCode.value = true
  const res = await getDeviceCodeList(params.value)
  deciveCodeList.value = res.data.data
  loadingdeviceCode.value = false
}
const onAddChannel = () => {
  dialogVisible.value = true
  getdeviceCodeList()
}
</script>

<template>
  <page-container title="厂房管理" class="container">
    <template #extra v-if="userStore.user.roleId === 3">
      <el-button @click="onAddChannel()" class="add-button"
        >管理机台号</el-button
      >
    </template>
    <el-form inline>
      <el-form-item v-if="userStore.user.roleId === 1" label="厂房编号:">
        <select-plant v-model="params.factoryId"></select-plant>
      </el-form-item>
      <el-form-item
        v-if="
          userStore.user.roleId === 1 ||
          userStore.user.roleId === 2 ||
          userStore.user.roleId === 3
        "
        label="车间:"
      >
        <select-work-shop v-model="params.id" style="width: 240px"></select-work-shop>

      </el-form-item>
      <el-form-item>
        <el-button @click="onSearch" class="select-button">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 机台号列表渲染 -->
    <el-table
      v-loading="loading"
      :data="clothList"
      style="width: 100%"
      height="550px"
    >
      <el-table-column type="index" label="序号" width="100"></el-table-column>
      <el-table-column prop="deviceCode" label="机台号"></el-table-column>
      <el-table-column prop="orderCode" label="订单编号"></el-table-column>
      <el-table-column prop="speed" label="转速"></el-table-column>

      <el-table-column prop="circleCount" label="圈数"></el-table-column>
      <el-table-column prop="defectCount" label="瑕疵数"></el-table-column>
      <el-table-column prop="careTaker" label="值机人"></el-table-column>
      <el-table-column prop="isAlarmState" label="是否报警"></el-table-column>
      <el-table-column prop="checkStatus" label="检测状态"></el-table-column>
      <el-table-column prop="lastOnlineTime" label="最近在线时间">
      </el-table-column>

      <!-- 没有数据 -->
      <template #empty>
        <el-empty description="没有数据"></el-empty>
      </template>
    </el-table>
    <!-- 管理机台 -->
    <el-dialog v-model="dialogVisible" title="管理机台" width="450px">
      <el-form label-width="100px" style="padding-right: 30px">
        <el-form-item label="车间名称">
          <el-select v-model="formModel.id" @click="getWorkShop">
            <el-option
              v-for="channel in workshopList"
              :key="channel.id"
              :label="channel.name"
              :value="channel.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="机台号">
          <el-input
            v-model="formModel.deviceCode"
            placeholder="请输入机台号"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit"> 确认添加 </el-button>
          <el-button @click="onResetDeviceCode">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="loadingdeviceCode"
        style="width: 100%"
        height="350px"
        :data="deciveCodeList"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100px"
        ></el-table-column>
        <el-table-column prop="workShopName" label="车间"></el-table-column>
        <el-table-column prop="deviceCode" label="机台号"></el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button
              circle
              plain
              type="danger"
              :icon="Delete"
              @click="deletedeviceCode(row)"
            ></el-button>
          </template>
        </el-table-column>
        <!-- 没有数据 -->
        <template #empty>
          <el-empty description="没有数据"></el-empty>
        </template>
      </el-table>
    </el-dialog>
  </page-container>
</template>

<style lang="scss" scoped>
.container {
  border-radius: 20px;
  font-weight: bold;
  font-size: 17px;
}
.add-button {
  background-color: #077aee;
  font-weight: bold;
  color: #fff;
}
.select-button {
  background-color: #077aee;
  color: #fff;
}
</style>
